<template>
    <BaseContent>
        <div class="card card_title">
            <div class="card-body card_single_title">
                <h2>{{ a_book_info.title }}</h2>
                时间：{{ currentTime }}
            </div>
        </div>
        <div class="card">
            <div class="card-body card_single_item">
                <span>【资源名称】：{{ a_book_info.title }}</span>
                <span>【出版时间】：{{ a_book_info.publication_date }}</span>
                <span>【在线阅读】：<button type="button" class="btn btn-secondary" @click="open_a_book_content">立刻阅读</button></span>
                <span v-if="a_book_info.awarded==='神作'">
                    【豆瓣获称】：<button type="button" class="btn btn-warning">{{ a_book_info.awarded }}</button>
                </span>
                <span v-if="a_book_info.awarded==='潜力'">
                    【豆瓣获称】：<button type="button" class="btn btn-success">{{ a_book_info.awarded }}</button>
                </span>
                <span v-if="a_book_info.awarded==='值得一读'">
                    【豆瓣获称】：<button type="button" class="btn btn-danger">{{ a_book_info.awarded }}</button>
                </span>
                <span v-if="a_book_info.awarded==='脍炙人口'">
                    【豆瓣获称】：<button type="button" class="btn btn-info">{{ a_book_info.awarded }}</button>
                </span>
                <span v-if="a_book_info.awarded==='褒贬不一'">
                    【豆瓣获称】：<button type="button" class="btn btn-secondary">{{ a_book_info.awarded }}</button>
                </span>
                <span v-if="a_book_info.awarded==='评论不足'">
                    【豆瓣获称】：<button type="button" class="btn btn-link">{{ a_book_info.awarded }}</button>
                </span>
                <span>【图书简介】：{{ a_book_info.description }}</span>
            </div>
        </div>
        <div class="card card_content">
            <div class="card-body">
                <div class="row">
                    <div class="col-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-3">
                                    <div class="mb-3">
                                        <label for="exampleFormControlTextarea1" class="form-label">写书评</label>
                                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" v-model="content"></textarea>
                                        <button type="button" class="btn btn-success btn-sm" @click="comment">发布</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-9">
                        <div class="card" v-for="post in posts.posts" :key="post.id">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="card">
                                            <div class="card-body">                                         
                                                <img :src="post.user_photo" alt="" class="img-fluid">
                                                {{ post.user_nickname }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-8 comment_felid">
                                        <div class="shijian">{{ post.shijian }}</div>
                                        <div class="post_content">{{ post.content }}</div>
                                        <!-- <button type="button" class="btn btn-success btn-sm to_honor">赞同</button>
                                        <button type="button" class="btn btn-danger btn-sm to_honor">反对</button> -->    
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
// import store from '@/store';
import $ from 'jquery';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
export default {
    name: "BookInfoView",
    components: {
        BaseContent
    },
    setup() {
        const route = useRoute();
        const bookid = parseInt(route.params.bookid);
        const a_book_info = ref([]);
        const store = useStore();
        const posts = reactive({});
        const studentlist = reactive({});
        const book_user_ranking = reactive({});
        const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
        let post_user_id = ref([]);
        let content = ref('');
        $.ajax({
            url: 'http://47.121.28.202:8000/settings/getbooks/',
            type: "GET",
            success(resp) {
                for (let book of resp) {
                    if (book.id === bookid) {
                        a_book_info.value = book;
                    }
                }
                // console.log(resp);
            }
        })

        // const open_a_book_content = () => {
        //     window.open(a_book_info.value.mobi_file);
        //     console.log(a_book_info.value.mobi_file);
        // }
        const open_a_book_content = () => {  
            const mobiFileUrl = a_book_info.value.mobi_file.url; // 获取文件的 URL  
            // mobiFileUrl.download.click();
            const a = document.createElement('a'); // 创建一个隐形的链接  
            a.href = mobiFileUrl; // 设置链接的 URL  
            a.download = ''; // 设置为下载
            document.body.appendChild(a); // 将链接添加到文档  
            a.click(); // 模拟点击以下载文件  
            document.body.removeChild(a); // 下载后从文档中移除链接  
        };  
        $.ajax({
            url: "http://47.121.28.202:8000/settings/ranking/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            data: {
                user_id: store.state.user.id,
            },
            success(resp) {
                book_user_ranking.count = resp.length,
                book_user_ranking.book_user_ranking = resp;
            }
        })

        $.ajax({
            url: 'http://47.121.28.202:8000/settings/posts/',
            type: "GET",
            data: {
                // user_id: store.state.user.id,
                book_id: bookid,
            },
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                posts.posts = resp;
                posts.count = resp.length;
                resp.forEach((post) => {
                    post_user_id.value.push(post.user_id);
                });
            }
        })

        const add_score = () => {
            for (let i of book_user_ranking.book_user_ranking) {
                if(i.book_title === a_book_info.value.title) {
                    $.ajax({
                        url: 'http://47.121.28.202:8000/settings/ranking/',
                        type: "PATCH",
                        headers: {
                            'Authorization': "Bearer " + store.state.user.access,
                        },
                        data: {
                            book_score: i.book_score + 10,
                            book_id: i.book_id,
                            user_id: store.state.user.id,
                            visittime: formattedDate,
                        },
                    })
                    return
                }
            }
            console.log("出错了");
        }

        const comment = () => {
            add_score();
            $.ajax({
                url: "http://47.121.28.202:8000/settings/posts/",
                type: "POST",
                data: {
                    content: content.value,
                    user_photo: store.state.user.photo,
                    user_nickname: store.state.user.nickname,
                    shijian: formattedDate,
                    book_id: a_book_info.value.id,
                    user_id: store.state.user.id,
                },
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                success(resp) {
                    console.log(a_book_info.value.id);
                    if (resp.result === "success") {
                        posts.count ++;
                        posts.posts.unshift({
                            id: posts.count,
                            user_id: store.state.user.id,
                            book_id: a_book_info.value.id,
                            content: content.value,
                            user_photo: store.state.user.photo,
                            user_nickname: store.state.user.nickname,
                            shijian: formattedDate,
                        })
                        content.value = "";
                    }
                }
            })

            $.ajax({
                url: 'http://47.121.28.202:8000/settings/getbooks/',
                type: "PATCH",
                data: {
                    book_id: a_book_info.value.id,
                    stock: a_book_info.value.stock,
                    score: a_book_info.value.score + 10,
                },
            })
        }
        $.ajax({
            url: "http://47.121.28.202:8000/settings/studentlist/",
            type: "GET",
            success(resp) {
                studentlist.value = resp;
            }
        })
        return {
            bookid,
            a_book_info,
            currentTime: new Date().toLocaleString(),
            posts,
            comment,
            content,
            post_user_id,
            studentlist,
            open_a_book_content
        }
    }
}
</script>

<style scoped>
.card_title {
    font-weight: 800;
}
.card_single_title {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card_single_item {
    display: flex;
    flex-direction: column;
}
button {
    width: 100px;
}
span {
    margin-top: 5px;
}
.card {
    margin-top: 10px;
}
.btn-sm {
    margin-top: 15px;
}
img {
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.comment_felid {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}
.shijian {
    /* float: right; */
    position: absolute;
    right: 18px;
    color: gray;
    font-size: 14px;
    top: 10px;
    margin-bottom: 10px;
}
.post_content {
    margin-top: 12px;
}
.card_content {
    user-select: none;
}
</style>